<template>
  <div id="populationMenu">  
    <div class="head">  
      <p>简介: {{ useData.theDetail?.name }}</p>  
      <p>课程目标: {{ useData.theDetail?.courseData?.goal }}</p>  
    </div>  
    <div >  
      <div class="content" >  
        <div  
          class="menu"  
          v-for="(task, index) in useData.theDetail?.courseData?.taskGroups"  
          :key="index"    
          :class="{ 'show-content': activeIndexes.includes(index) }"
          
        >  
        <div class="neirong" @click="toggleContent(index)">
          <div class="inside"><img :src="task.iconPath" alt="" class="tu1" style="width: 20px; height: 20px;">  
          <div>{{ task.name }}</div>
        </div> 
        <div class="iconfont icon-mono-bottom"  :class="{ 'rotated': activeIndexes.includes(index) }"></div>
      </div>  
        <div  
            class="menu2"  
            v-for="item in task.tasks"  
            :key="item.currNo"  
           
          > 
          <div class="inset" @click=" toggle(item)">
            <div class="inside two" ><img :src="item.iconPath" alt="" class="tu2" style="width: 20px; height: 20px;">{{ item.name }}</div>  
            <div class="iconfont icon-double-arrow-down"  :class="{ 'rotated': activeIndexes.includes(index) }">
            </div>
          </div>
          <transition class="guodu">
          
          <div class="neirong2" v-show="item.isOpen">
            
            <div class="box">  
              <p>简介：</p>  
              <p>{{ item.description.replace(/<p>|<\/p>/g, '') }}</p>  
            </div>  
            <div class="box">  
              <p>目标：</p>  
              <p>{{ item.goal.replace(/<p>|<\/p>/g, '') }}</p>  
            </div>  
            
            <div class="inside second" v-for="guidelines in item.guidelines"> 
              <div style="display: flex; align-items: flex-start; margin-top: 10px;" >
              <div class="iconfont icon-chakanwenzhangliebiaozhuanhuan change" style="font-size: 22px;"></div> 
              <p>{{ guidelines.operType }}:</p>  
              <p>{{ guidelines.description.replace(/<p>|<\/p>/g, '') }}</p> 
            </div> 
              <div class="iconfont icon-sanjiantou"
                style="display: flex;justify-content: center; font-size: 23px;width: 22px;margin: 0;"
                ></div>
              </div>
            </div>  
          </transition>

          </div>  
        </div>  
      </div>  
      <div class="tab-content">  
        <div  
         
        >  
          
        </div>  
      </div>  
    </div>  
  </div>  

</template>

<script setup>
// import { useRoute } from 'vue-router';
import useDataStore from "@/stores/Data";
import { useRoute } from 'vue-router';
import { onMounted } from 'vue';
import { ref } from 'vue'
const activeIndexes = ref([])
const activeIndexes2 = ref([])
const activeIndexes3 = ref([])

const route=useRoute()
const useData=useDataStore()

// onMounted(()=>{
//   useData.getDetailData(Number(route.query.corrNo));
// })


function toggleContent(index) {
  const idx = activeIndexes.value.indexOf(index);
  if (idx !== -1) {
    activeIndexes.value.splice(idx, 1);
  } else {
    activeIndexes.value.push(index);
  }
}
function toggle(item) {  
  item.isOpen = !item.isOpen; // 切换 isOpen 的值  
    }
</script>

<style scoped>
.head{
  padding: 21px 0 15px;
  box-shadow: 0 8px 16px 0 rgba(7, 23, 39, .1);
  margin-top: 31px;
  border-radius: 13px;
  transition: all .1s linear;
  align-items: flex-start;
  font-weight: bolder;
  overflow: hidden;
  cursor: pointer;
  overflow: hidden;
  transition: 0.3s ease-in-out;
  background-color: white;
}
.menu {
  padding: 21px 0 15px;
  box-shadow: 0 8px 16px 0 rgba(7, 23, 39, .1);
  margin-top: 31px;
  border-radius: 13px;
  transition: all .1s linear;
  align-items: flex-start;
  font-weight: bolder;
  overflow: hidden;
  cursor: pointer;
  overflow: hidden;
  transition: 0.3s ease-in-out;
  background-color: white;
  max-height:60px;

}

.menu2 {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 835px;
  /* max-height:60px; */
  padding: 21px 0 15px;
  box-shadow: 0 8px 16px 0 rgba(7, 23, 39, .1);
  margin-top: 31px;
  border-radius: 13px;
  transition: all .1s linear;
  align-items: flex-start;
  font-weight: bolder;
  overflow: hidden;
  cursor: pointer;
  overflow: hidden;
  align-items: center;
  transition: max-height 0.3s ease-in-out;
  background-color: white;
}

.menu-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: white;
  padding: 21px 0 15px;
  box-shadow: 0 8px 16px 0 rgba(7, 23, 39, .1);
  justify-content: space-between;
  width: 100%;
  margin-top: 31px;
  border-radius: 18px;
  max-height: 100px;
  overflow: hidden;
}

.neirong {
  display: flex;
  align-items: center;
  width: 100%;
  height: 22px;
  justify-content: space-between;
}

.yaoqiu {
  position: relative;
  width: 100%;
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.3s ease-out;

}

.show-content {
  /* 当内容被激活时，设置一个足够大的max-height来显示内容 */
  max-height: 1200px;
  /* 示例值，根据内容动态计算或设置为一个较大的值 */
  background-color: #f9f9f9;
}

.show-content2 {
  /* 当内容被激活时，设置一个足够大的max-height来显示内容 */
  background-color: white;
  max-height: 1000px;
  /* 示例值，根据内容动态计算或设置为一个较大的值 */
}

.show-content3 {
  /* 当内容被激活时，设置一个足够大的max-height来显示内容 */
  max-height: 1000px;
  /* 示例值，根据内容动态计算或设置为一个较大的值 */
  transition: all 0.3s;

}

.iconfont.rotated {
  transform: rotate(180deg);
}

.icon-sanjiantou.rotated{
  transform: rotate(360deg);
}

.iconfont {
  width: 17px;
  transition: 0.3s;
  margin-right: 20px;
}

.tu1 {
  border-radius: 50% ;
  height: 60px;
  width: 60px;
  margin: 20px;
}

.tu2 {
  border-radius: 50%;
  height: 22px;
  width: 22px;
  margin: 20px;
}

.tu {
  width: 22px;
  margin-left: 20px;
}

.inset {
  display: flex;
  align-items: center;
  width: 100%;
  height: 22px;
  justify-content: space-between;
}

.inside {
  display: flex;
  align-items: center;
}

.two {
  border-left: 4px #f1b03d solid;
  height: 22px;
}

.neirong2 {
  width: 96%;
  margin-top: 12px;
  font-family: STFangsong;
  font-weight: bolder;
  line-height: 30px;
  padding-top: 10px;
  padding-bottom: 5px;
  margin-top: 30px;
}

.second:hover {
  background-color: #fff6e1;
  border-radius: 8px;
}

.second:hover .change {
  color: rgb(250 195 67);
  transition: all 0s;
}



.second {
  width: 100%;
  display: flex;
  align-items: start;
  justify-content: space-between;
}

.content.expanded {
    max-height: 2100px;
    background-color: #f9f9f9;
}

#populationMenu{
  position: absolute;
  margin: 30px;
  height: 100%;
}
</style>